<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+JS三级联动效果</title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>

<style type="text/css">
html{ overflow:hidden; background:#fff; width:100%; height:100%;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
body{font-family: "微软雅黑"; font-size:12px; color:#000000; background:#fff;overflow:hidden; width:100%; height:100%;}
button,input,select,textarea{ font:12px/1.5  Arial, "宋体", Helvetica,  Verdana, sans-serif; word-wrap:break-word; color:#565756;}
ul,li{ list-style:none; margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-weight:normal; font-size:100%;} 
img{ border:none; border:0; vertical-align:middle;}
a{ text-decoration:none; outline:none;}
p{ margin:0; padding:0;}
input,select,textarea{vertical-align:middle; *font-size:100%;}
input{ margin:0;outline:none; padding:0;}
input::-ms-clear{display:none;}
.clearfix:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden;        

}
.clearfix{*zoom:1}

/* m_zlxg */
.m_zlxg{ width:93px; height:30px; line-height:30px;cursor:pointer;float:left;margin:0 10px 0 0;display:inline;background:url(images/zlxg2.jpg) no-repeat;}
.m_zlxg p{ width:71px; padding-left:10px; overflow:hidden; line-height:30px; color:#333333; font-size:12px; font-family:"微软雅黑";text-overflow:ellipsis; white-space:nowrap;}
.m_zlxg2{ position:absolute; top:29px; border:1px solid #ded3c1;background:#fff; width:91px; display:none; max-height:224px;-height:224px; overflow-x:hidden; overflow-y:auto;white-space:nowrap;}
.m_zlxg2 li{line-height:28px;white-space:nowrap; padding-left:10px;font-family:"微软雅黑";color:#333333; font-size:12px;}
.m_zlxg2 li:hover{ color:#7a5a21;}
</style>
<body>

<div id="sjld" style="width:520px;margin:40px auto;position:relative;">
	<div class="m_zlxg" id="shenfen">
		<p title="">选择省份</p>
		<div class="m_zlxg2">
			<ul></ul>
		</div>
	</div>
	<div class="m_zlxg" id="chengshi">
		<p title="">选择城市</p>
		<div class="m_zlxg2">
			<ul></ul>
		</div>
	</div>
	<div class="m_zlxg" id="quyu">
		<p title="">选择区域</p>
		<div class="m_zlxg2">
			<ul></ul>
		</div>
	</div>
	<input id="sfdq_num" type="hidden" value="" />
	<input id="csdq_num" type="hidden" value="" />
	<input id="sfdq_tj" type="hidden" value="" />
	<input id="csdq_tj" type="hidden" value="" />
	<input id="qydq_tj" type="hidden" value="" />
</div>

<script type="text/javascript" src="js/address.js"></script>
<script type="text/javascript">
$(function(){

	$("#sjld").sjld("#shenfen","#chengshi","#quyu");
	
});
</script>

</body>
</html>
